import React from 'react';
import * as PropTypes from 'prop-types';

import { Picker, List } from 'antd-mobile';

class CustomPicker extends React.Component {
  static defaultProps = {
    columns: []
  }

  constructor(props) {
    super(props);

    let value;
    if ('defaultValue' in props) {
      value = props.defaultValue;
    }
    this.state = {
      value,
    };
  }

  /**
   * 监测指标
   */
  handleChange = (value) => {
    const lastValue = this.state.value;

    const { onChange } = this.props;
    if (onChange && value !== lastValue) {
      this.setState({
        value
      })
      onChange(value)
    }
  }

  render() {
    const { columns } = this.props;
    const { value } = this.state;
    return (<div>
      <List>
        <Picker
          data={columns}
          value={value}
          cols={1}
          onChange={e => this.handleChange(e)}
        >
          <List.Item arrow="horizontal">监测指标：</List.Item>
        </Picker>
      </List>
    </div>);
  }

}

CustomPicker.propTypes = {
  columns: PropTypes.array,
  onChange: PropTypes.func,
}
export default CustomPicker;
